<template>
  <div class="center">
    <div class="u-avatar">
      <div>
        <Avatar
          class="avatar"
          :avatar="{
            id: 0,
            username: $store.state.user.nickname,
            txcolor: $store.state.user.txcolor,
            bgcolor: $store.state.user.bgcolor,
          }"
        />
        <div class="un">{{ $store.state.user.nickname }}</div>
      </div>
      <div>
        <el-card class="box-card m-card">
          <div slot="header">
            <span>我的钱包</span>
          </div>
          <div>
            <div class="money">{{ $store.state.user.balance }}</div>
            <div class="name">余额</div>
          </div>
        </el-card>
      </div>
    </div>

    <div class="right-cz">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的账号" name="userinfo">
          <div class="info-n">用户名：{{ $store.state.user.username }}</div>
          <div class="info-nk">
            <div class="nc">
              <span>昵称：</span>
              <span v-if="!uduser.is">{{ $store.state.user.nickname }}</span>
              <el-input
                v-else
                placeholder="请输入内容"
                v-model="uduser.nickname"
              >
              </el-input>
            </div>

            <div class="xg">
              <el-link
                v-if="!uduser.is"
                :underline="false"
                type="danger"
                @click="setNickname"
                icon="el-icon-edit"
                >修改</el-link
              >
              <el-link v-else :underline="false" @click="uduser.is = false"
                >取消</el-link
              >
            </div>
          </div>
          <div>
            <el-button
              class="save-btn"
              size="mini"
              round
              @click="saveNickname('uduser')"
              >保存</el-button
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="uppassword">
          <el-form
            :model="udpassword"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="旧密码：" prop="oldpassword">
              <el-input v-model="udpassword.oldpassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newpassword">
              <el-input
                show-password
                v-model="udpassword.newpassword"
              ></el-input>
            </el-form-item>
            <el-form-item label="确定密码：" prop="confimpassword">
              <el-input
                show-password
                v-model="udpassword.confimpassword"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button
            class="save-btn-pw"
            size="mini"
            round
            @click="savePassword('ruleForm')"
            >保存</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="收货地址" name="address">
          <div
            class="consignee"
            v-for="item in $store.state.user.consignees"
            :key="item.id"
          >
            <div class="ce">
              <span>收货人:</span>
              <el-input
                v-if="udaddress.is && udaddress.id === item.id"
                v-model="udaddress.username"
              ></el-input>
              <div v-else>{{ item.username }}</div>
            </div>
            <div class="ce">
              <span>地址:</span>
              <el-input
                v-if="udaddress.is && udaddress.id === item.id"
                v-model="udaddress.address"
              ></el-input>
              <div v-else>{{ item.address }}</div>
            </div>
            <div class="ce">
              <span>手机:</span>
              <el-input
                v-if="udaddress.is && udaddress.id === item.id"
                v-model="udaddress.phone"
              ></el-input>
              <div v-else>{{ item.phone }}</div>
            </div>
            <div class="ce">
              <template v-if="udaddress.is && udaddress.id === item.id">
                <el-button size="mini" round @click="saveAdress(item.id)"
                  >保存</el-button
                >
                <el-button size="mini" round @click="udaddress.is = false"
                  >取消</el-button
                >
              </template>
              <el-button
                v-else
                icon="el-icon-edit"
                @click="handelAddress(item.id)"
                type="text"
                >修改</el-button
              >
            </div>
          </div>

          <div class="consignee" v-if="formdata.is">
            <div class="ce">
              <span>收货人:</span>
              <el-input v-model="formdata.username"></el-input>
            </div>
            <div class="ce">
              <span>地址:</span>
              <el-input v-model="formdata.address"></el-input>
            </div>
            <div class="ce">
              <span>手机:</span>
              <el-input v-model="formdata.phone"></el-input>
            </div>
            <div class="ce">
              <el-button size="mini" round @click="handelAdd">保存</el-button>
              <el-button size="mini" round @click="formdata.is = false"
                >取消</el-button
              >
            </div>
          </div>
          <el-button
            type="text"
            class="submit"
            style="color: #fff"
            @click="formdata.is = true"
            >添加</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style lang="scss">
.center {
  .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .el-input {
    max-width: 300px;
  }
}
</style>
<style lang="scss" scoped>
.center {
  display: flex;
  justify-content: center;
  .el-link:hover {
    color: red;
  }
  .u-avatar {
    width: 250px;
    height: 180px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    .m-card {
      margin-top: 68px;
    }
  }
  .clearfix {
    width: 400px;
    margin-left: 10px;
    height: 300px;
  }
  .un {
    margin-top: 30px;
    color: #333;
    text-align: center;
    font: 700 18px/20px Arial;
  }
  .avatar {
    transform: scale(1.4);
    margin-top: 18px;
    margin-left: 120px;
  }
  .money {
    color: #333;
    line-height: 24px;
    font-size: 22px;
    font-weight: 700;
    width: 100px;
    text-align: center;
  }
  .name {
    width: 100px;
    margin-top: 10px;
    text-align: center;
    font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB,
      "\u5b8b\u4f53", sans-serif;
  }
  .right-cz {
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 4px;
    width: 600px;
    min-height: 300px;
    margin-left: 14px;
    margin-bottom: 15px;
    padding: 6px 14px;
    color: #666;
    font: 14px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB,
      "\u5b8b\u4f53", sans-serif;

    .info-nk,
    .info-n {
      margin: 20px;
    }
    .info-nk {
      display: flex;
      .nc {
        display: flex;
      }

      .nc span:nth-child(1) {
        width: 56px;
      }
      .xg {
        margin-left: 20px;
      }
    }
    .save-btn {
      margin-left: 20px;
    }
    .save-btn-pw {
      margin-left: 100px;
    }
  }
  .consignee {
    border: 1px solid rgb(197, 197, 197);
    margin-bottom: 8px;
    .ce {
      span {
        color: #999;
        width: 50px;
      }
      display: flex;
      margin-left: 20px;
      padding: 10px 0;
      div {
        margin-left: 8px;
      }
    }
  }
  .submit {
    width: 182px;
    height: 39px;
    margin-left: 210px;
    background-color: #e4393c;
  }
}
</style>

<script>
import Avatar from '../../components/Avatar'
import { amendNickname, amendPassword, addAddress } from '../../api/store'

export default {
  components: {
    Avatar
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.udpassword.newpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      formdata: {
        is: false,
        username: '',
        address: '',
        phone: ''
      },
      activeName: 'userinfo',
      uduser: {
        is: false,
        nickname: ''
      },
      udpassword: {
        oldpassword: '',
        newpassword: '',
        confimpassword: ''
      },
      udaddress: {
        id: 1,
        is: false,
        username: '',
        address: '',
        phone: ''
      },
      rules: {
        oldpassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' }
        ],
        confimpassword: [
          { required: true, message: '确定密码不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      if (this.activeName === 'uppassword') {
        this.udpassword.oldpassword = ''
        this.udpassword.newpassword = ''
        this.udpassword.confimpassword = ''
      }
    },
    // 修改昵称
    setNickname () {
      console.log('ok')
      this.uduser.is = true
      this.uduser.nickname = this.$store.state.user.nickname
    },
    // 更改昵称
    saveNickname (formName) {
      this.uduser.is = false
      this.$store.commit('setNickname', this.uduser.nickname)
      amendNickname({
        nickname: this.uduser.nickname
      }).then(this.$message.success('修改昵称成功,请重新登录确认！'))
    },
    // 修改密码
    savePassword (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          amendPassword({
            password: this.udpassword.oldpassword,
            newPassword: this.udpassword.newpassword,
            confirmPassword: this.udpassword.confimpassword.toString()
          }).then(this.$message.success('修改密码成功,请重新登录确认！'))
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log(this.udpassword)
    },
    // 修改地址
    handelAddress (id) {
      const consignee = this.$store.state.user.consignees.filter(
        (item) => item.id === id
      )[0]
      console.log(consignee)
      this.udaddress.id = id
      this.udaddress.is = true
      this.udaddress.username = consignee.username
      this.udaddress.address = consignee.address
      this.udaddress.phone = consignee.phone
    },
    // 保存收货地址
    saveAdress (id) {
      const username = this.udaddress.username.trim()
      const address = this.udaddress.address.trim()
      const phone = this.udaddress.phone.trim()
      if (username.length > 0 && address.length > 0 && phone.length > 0) {
        this.$store.commit('setConsignee', {
          id,
          consignee: this.udaddress
        })
        this.udaddress.is = false
      } else {
        alert('错误！\n填写内容有误，请重新提交')
      }
    },
    // 添加地址
    handelAdd () {
      const data = this.formdata
      delete data.is
      this.$store.commit('handleAdd', data)
      addAddress({
        usersId: this.formdata.id,
        consignee: this.formdata.username,
        cPhone: this.formdata.phone,
        shippingAddress: this.formdata.address
      }).then(this.$message.success('添加地址成功！'))
    }
  }
}
</script>
